<template>
  <view class="help">
    <customHeader class="help-custom-title" title="获取更多帮助" />
    <view class="help-title">猜你想问</view>
    <!-- 攻略列表 -->
    <view class="problem-wrap" v-for="(n, idx) in strategyList" :key="idx">
      <view class="title">{{ n.title }}</view>
      <AtAccordion
        v-for="(m, i) in n.content"
        :key="i"
        :hasBorder="false"
        :on-click="
          () => {
            onClick(m);
          }
        "
        :data-index="i"
        :title="m.name"
        :open="m.open"
        :isAnimation="false"
      >
        <view>
          <view
            class="help-accordion__content"
            v-for="(x, i) in m.answer"
            :key="i"
            >{{ x }}</view
          >
        </view>
      </AtAccordion>
    </view>

    <!-- 教师二维码 -->
    <view v-if="!!QR_CODE" class="help-add-teacher">
      <view class="title">扫码添加老师 获取1对1服务</view>
      <image :lazy-load="true" :src="QR_CODE" :show-menu-by-longpress="true" />
      <view class="tips">微信号：{{ wx_phone }}</view>
      <view class="copy" @tap="copy">复制微信号</view>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { AtAccordion } from "taro-ui-vue";
import customHeader from "@/components/custom-header";
import { problemList } from "_api/help";
import { receiveTeacher } from "_api/home";
import globalData from "@/libs/globalData";
import Taro from "@tarojs/taro";
import "./index.scss";
/* 攻略列表 sharp */
interface StrategyList {
  open: boolean;
  name: string;
  answer: string;
}
@Component({
  components: { AtAccordion, customHeader }
})
export default class Stra extends Vue {
  /* 攻略列表 */
  public strategyList: StrategyList[] = [];
  /*  二维码图片 */
  QR_CODE: string = "";
  wx_phone: string = "";

  created() {
    this.getProblemList();
    this.getTeacherInfo();
  }
  get query() {
    return {
      city_id: Taro.getStorageSync("city_id") || null,
      grade_id: Taro.getStorageSync("grade_id") || null
    };
  }
  /* 获取接待老师信息 */
  async getTeacherInfo() {
    const { city_id, grade_id } = this.query;
    const {
      data: { qrcode_url, phone }
    } = await receiveTeacher({ city_id, grade_id });
    this.QR_CODE = qrcode_url;
    this.wx_phone = phone;
  }

  /* 获取帮助列表 */
  async getProblemList() {
    const { data } = await problemList();
    data.forEach(v => {
      v.content.forEach(n => {
        n.open = false;
      });
    });
    this.strategyList = data;
  }
  /* 点击 AtAccordion 展开收起*/
  onClick(m): void {
    m.open = !m.open;
  }
  copy() {
    Taro.setClipboardData({
      data: this.wx_phone,
      success() {},
      fail() {}
    });
  }
}
</script>
